<!-- app.vue ]-->
<template>
    <div class="app">
    <p>我是父组件</p>
    {{ name }} {{ model }} {{ price }} {{ color }}
    <Son></Son>
  
    </div>
  
  </template>
  <script setup>
  import Son from "@/components/son.vue"
  const car = reactive({
    name:'宝马',
    model:'328',
    price:30,
    color:'白色'
  })
  
  const {name, model, price, color} = toRefs(car)
  //provide注入数据
  provide('car', car)
  </script>
  
  <style lang="less" scoped>
  
    .app {
      width: 1000px;
      height: 800px;
      border: 1px dashed black;
      margin: 0 auto;
      padding: 0;
    }
  </style>
<!-- app.vue ]-->

<!-- son.vue [ -->
<template>
    <div class="son">
      {{ msg }}
      <greadSon></greadSon>
    </div>
</template>

<script setup name="son">
import greadSon from "@/components/greadSon.vue"
let msg=ref('我是son组件');
const car =inject('car')
console.log('[ son页面car ] >', car)
</script>

<style lang="less" scoped  >
 .son{
  background: salmon;
  text-align: center;
 }

</style>

<!-- son.vue ]-->

<!-- greadson.vue [-->

<template>
    <div>
      {{ msg }}
      <h3>下面是通过injetc获取的父组件appvue的数据</h3>
      {{ car }}
      <button type="button"  @click="car.price+=10">修改car</button>
    </div>
</template>

<script setup name="greadSon">
let msg=ref('我是孙组件');
const car =inject('car')
console.log('[ car ] >', car)
</script>

<style lang="less" scoped  >


</style>
<!-- greadson.vue ]-->